<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
a,acronym,b,bdo,big,cite,code,del,dfn,em,font,i,ins,kbd,label,q,s,samp,small,span,strike,strong,sub,sup,tt,u,var
{font-size:30px; line-height:50px; border:10px solid gold; padding:10px; background:yellow url(w3c.gif);  cursor:pointer;}
div.info{font-size:12px; line-height:18px; color:#060; background:#EEE;margin:30px 0 30px 0;}
</style>
</head>
<body>
<script>
var inlineElements = {
	'a':'<a></a>',
	'acronym':'<acronym></acronym>',
	'b':'<b></b>',
	'bdo':'<bdo></bdo>',
	'big':'<big></big>',
	'cite':'<cite></cite>',
	'code':'<code></code>',
	'del':'<del></del>',
	'dfn':'<dfn></dfn>',
	'em':'<em></em>',
	'font':'<font></font>',
	'i':'<i></i>',
	'ins':'<ins></ins>',
	'kbd':'<kbd></kbd>',
	'label':'<label></label>',
	'q':'<q></q>',
	's':'<s></s>',
	'samp':'<samp></samp>',
	'small':'<small></small>',
	'span':'<span></span>',
	'strike':'<strike></strike>',
	'strong':'<strong></strong>',
	'sub':'<sub></sub>',
	'sup':'<sup></sup>',
	'tt':'<tt></tt>',
	'u':'<u></u>',
	'var':'<var></var>'
}

function getElementSize(element){
	return {w:element.offsetWidth,h:element.offsetHeight};
}

function getStyle(element,styleName){
	return (element.currentStyle)
		?  element.currentStyle[styleName.replace(/-[a-z]/g, function() {
			return arguments[0].charAt(1).toUpperCase();
		})]
		: (document.defaultView && document.defaultView.getComputedStyle)
			? document.defaultView.getComputedStyle(element, null).getPropertyValue(styleName)
			: null ;
}

function bindEvent(element,eventName,fn){
	element["on"+eventName] = fn;
}

function buildElementInfo(tagName,element){
	var elementSize = getElementSize(element);
	document.writeln('<div class="info">');
	document.writeln(tagName,' 标记的宽为:',elementSize.w,'px; ','标记的高为:',elementSize.w,'px; ', 'display 值为:', getStyle(element,'display'));
	document.writeln("</div>");
}

function buildElement(title,type,html){
	var elementSize,element;
	document.write(title);
	for (var i in inlineElements) {
		document.writeln('<div>');
		document.write(i," Tag:");
		document.write(inlineElements[i]);
		document.writeln("其他文本内容……");
		document.writeln('</div>');
		element = document.getElementsByTagName(i)[type];
		(type==2) && (element.style.zoom = "1");
		element.innerHTML = html;
		buildElementInfo(i,element);
		bindEvent(element,"click",(function(i){return function(){alert(i+" 标记被点击")}})(i))
	}
}

buildElement("<h2>空非替换行内元素渲染情况</h2>",0,"");
buildElement("<h2>非空的非替换行内元素渲染情况</h2>",1,"hello");
buildElement("<h2>触发了 IE6 IE7 IE8(Q) 中 hasLayout 特性的空非替换行内元素渲染情况</h2>",2,"");
</script>
</body>
</html>